<template>
  <div class="app-container">
    <el-tabs v-model="currTab" @tab-click="tabClick">
      <el-tab-pane v-for="item in projectList" :key="item.id" :label="item.projectName" :name="item.id">
        <component :is="item.content" :ref="item.id" :project-id="currTab" @selectedPosition="selectedPosition" />
      </el-tab-pane>
    </el-tabs>

    <!-- 底部操作条 -->
    <div class="bbar">
      <div class="flexLeft">
        <div class="eventLabel">
          <span><i class="canOrderLabel" />可预订</span>
          <span><i class="expireOrderLabel" />过期预订</span>
          <span><i class="payUnderLabel" />线下已付</span>
          <span><i class="noPayUndeLabel" />线下未付</span>
          <span><i class="lockLabel" />线上预定</span>
          <span><i class="lockLabelWarning" />人工锁场</span>
          <span><i class="fixPayLabel" />固定已付</span>
          <span><i class="fixNoPayLabel" />固定未付</span>
          <span><i class="reserveLabelWarning" />线上预留</span>
        </div>
      </div>
      <div class="flexRight">
        <p>已选：<span>{{ count }} 个场次</span></p>
        <p>总计：<b>￥{{ totalPrice }}</b></p>
        <el-button type="primary" :disabled="count==0" @click="submitOrder">提交订单</el-button>
      </div>
    </div>
  </div>
</template>
<script setup name="OrderTable">
import { reactive, shallowRef } from 'vue'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import { projectConfigList } from '../../../../api/ven'
import { toRefs } from '@vueuse/shared'
import Main from './main'
import useVenStore from '../../../../store/modules/ven'


const { proxy } = getCurrentInstance()
const venStore = useVenStore()

const data = reactive({
  projectList: [],
  currTab: null,
  count: 0, // 已选场次
  totalPrice: 0
})
const { projectList, currTab, count, totalPrice } = toRefs(data)

function tabClick() {
  const currProject = _.find(projectList.value, (p) => p.id === currTab.value)
  if (!currProject.content) {
    currProject.content = shallowRef(Main)
  }
}

function selectedPosition(list) {
  count.value = list.length
  totalPrice.value = _.reduce(list, (a, b) => {
    return a + parseFloat(b.price)
  }, 0).toFixed(2)
}

function submitOrder() {
  proxy.$refs[currTab.value][0].handleOrder()
}

onMounted(() => {
  projectConfigList().then(res => {
    res.rows[0].content = shallowRef(Main)
    projectList.value = res.rows
    currTab.value = res.rows[0].id

    venStore.setProjectList(res.rows)
  })
})

</script>

<style lang="scss">
.app-container {
  background-color: #F5F7F9;
  padding-bottom: 100px;
}

.bbar {
  position: fixed;
  bottom: 0;
  background: #fff;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  left: 0;

  .flexRight {
    float: right;
    display: flex;
    height: 50px;
    align-items: center;
    margin-right: 40px;

    p {
      margin-right: 30px;
      color: #95A1A6;
      font-size: 16px;
    }

    span {
    }

    b {
      color: #EB6100;
      font-size: 22px;
    }
  }

  .flexLeft {
    float: left;
    margin: 0 0 0 220px;
  }
}

.checkedPlace {
  font-size: 15px;
  font-size: 15px;
  margin: 8px 8px;
  background: #fff;
  color: #000;
}

.eventLabel {
  margin-top: 20px;
  line-height: 17px;

  span {
    font-size: 12px;
    color: #2B3133;
    margin-right: 20px;
    display: inline-flex;
  }

  i {
    width: 17px;
    height: 17px;
    display: inline-block;
    margin-right: 6px;
  }

  .canOrderLabel {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
  }

  .expireOrderLabel {
    background: #D2D7D9;
  }

  .payUnderLabel {
    background: #1EC886;
  }

  .noPayUndeLabel {
    background: #F83E47;
  }

  .lockLabel {
    background: #20ccca;
  }

  .fixPayLabel {
    background: #FEA64B;
  }

  .fixNoPayLabel {
    background: #A570E9;
  }

  .lockLabelWarning {
    background: #e1e943;
  }
  .reserveLabelWarning {
    background: #f6c07a;
  }
}

.cRed {
  color: #EB6100;
  font-size: 18px;
}

.orderFullC.fc .fc-col-header-cell-cushion {
  line-height: 30px;
}
</style>
